<template>
    <div class="form-container">
        <form action="/" method="post" autocomplete="off">
            <!-- 表单分组 -->
            <fieldset>
                <legend>主要信息</legend>
                <label for="name">用户名:</label>
                <input type="text" id="name" maxlength="30" placeholder="请输入用户名" required />
                <br />
                <label for="password" style="margin-right: 25px">密码:</label>
                <input
                    type="password"
                    id="password"
                    maxlength="30"
                    placeholder="请输入密码"
                    autocomplete="new-password"
                    style="margin-top: 10px"
                    required
                />
                <br />
                <!-- 单选框  -->
                <label>性别:</label>
                <label for="male">男</label>
                <input type="radio" id="male" name="gender" value="male" checked />
                <label for="female">女</label>
                <input type="radio" id="female" name="gender" value="female" />
                <br />
            </fieldset>
            <!-- 复选框 -->
            <label>爱好:</label>
            <label for="smoking">
                <input type="checkbox" id="smoking" value="smoking" />抽烟
            </label>
            <label for="drink"> <input type="checkbox" id="drink" value="smoking" />喝酒 </label>
            <label for="perm"> <input type="checkbox" id="perm" value="smoking" />烫头 </label>
            <br />
            <!-- 下拉框 -->
            <label for="country">国家:</label>
            <select name="country" id="country">
                <optgroup label="isCountry">
                    <option value="CN" selected>中国</option>
                    <option value="USA">美国</option>
                    <option value="UK">英国</option>
                </optgroup>
                <optgroup label="isRegion">
                    <option value="TW">台湾地区</option>
                    <option value="HK">香港地区</option>
                    <option value="MO">澳门地区</option>
                </optgroup>
            </select>
            <br />
            用户描述:
            <br />
            <!-- 文本域 -->
            <textarea
                name="user_desc"
                id="user_desc"
                cols="30"
                rows="10"
                placeholder="请输入用户描述信息"
            ></textarea>
            <br />

            <button type="submit" style="margin: 0px 100px 0px 30px">提交</button>
            <button type="reset">重置</button>

            <!-- <input type="submit" value="提交"> -->
            <!-- <input type="reset" value="重置"> -->
        </form>
    </div>
</template>
<script setup></script>

<style lang="scss" scoped>
.form-container {
    box-sizing: border-box;
    height: 100vh;
    padding: 20px;
    // @include border($border-color: red);
    @include flex-center;

    label {
        text-align: justify;
        /* 设置固定宽度以确保对齐 */
        width: 80px;
        /* 与输入框之间留点空间 */
        margin-right: 10px;
        /* 根据需要调整行高，与输入框的height相匹配 */
        line-height: 24px;
    }
}
</style>
